<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	<title>Vue-ElementUI</title>
	<!--引入element的样式-->
	<link rel="stylesheet" href="../css/el/index.css" />
</head>

<body>
	<div id="app1">
		<!--Mustache标签：双大括号渲染数据-->
		<h3>系统名称：{{title}}</h3>
		<ul>
			<li v-for="(item,i) in products">
				名称：{{item.name}}
				<button @click="changeStock(item,item.stock-1)">-</button>
				<span v-if="item.stock>0">{{item.stock}}</span>
				<span v-else>无货</span>
				<button @click="changeStock(item,item.stock+1)">+</button>
				<button @click="remove(i)">删除</button>
			</li>
		</ul>
	</div>

	<div id="app2">
		<h3>Vue组件</h3>
		<p>时间：{{currentTime()}}</p>
		<p>时间：{{currentTime2}}</p>
		<!--组件：传递给组件中的值：props 父子组件传值-->
		<suoyue v-for="(item,index) in items" v-bind:item="item" :index="index"></suoyue>
	</div>

	<div id="app3">
		<h3>elementUI</h3>
		<el-upload
				action="/filesystem/upload"
				list-type="picture-card"
				:on-preview="handlePictureCardPreview">
			<i class="el-icon-plus"></i>
		</el-upload>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
	</div>


	<!--引入vue-->
	<script src="../js/vue.min.js"></script>
	<!--引入element-->
	<script src="../css/el/index.js"></script>
	<script>
		<!--将vue对象保存在vm实例中-->
		var vm = new Vue({		//配置
			el: "#app1",		//css选择器
			data: {			//数据
				title: "Vue管理系统",
				products:[
					{name: "iphone",stock: 10},
					{name: "redMi",stock: 5},
					{name: "onePlus",stock: 8},
				],
			},
			//定义方法
			methods:{
				remove(i){
					this.products.splice(i,1);		//this指代vm对象实例，根据下标删除指定元素
				},
				changeStock(product,newStock){
					if(newStock < 0){
						newStock = 0;
					}
					product.stock = newStock;
				},
			},
		});

		var vm2 = new Vue({
			el: "#app2",
			data: {
				items: ["Java","Spring","Vue","elementUI"]
			},
			methods:{
				currentTime: function () {
					//返回一个时间戳
					return Date.now();
				}
			},
			//计算属性computed - 会缓存计算数据
			computed: {
				currentTime2: function () {
					// this.message;		//类似增删改后重新取值
					return Date.now();		//返回一个时间戳
				}
			}
		});
		//注册组件component
		Vue.component("suoyue",{					//组件名
			props: ['item','index'],					//绑定数据
			template: '<li>{{item}} - {{index}}</li>'			//组件模板template
		});

		var vm3 = new Vue({
			el:"#app3",
			data:{
				dialogVisible:false,
				dialogImageUrl:''
			},
			methods:{
				handlePictureCardPreview(file){
					console.log(file)
					this.dialogImageUrl = "http://127.0.0.1/"+file.response.filePath
					this.dialogVisible = true;
				}
			}
		});

	</script>

</body>
</html>